{% extends "layout.html" %} {% block title %} Donate to KiCad {% endblock %} {% block head %} {{ super() }}
<style type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/rangeslider.js/2.3.3/rangeslider.css"></style>
<script src="https://code.jquery.com/jquery-3.6.0.slim.min.js" integrity="sha256-u7e5khyithlIdTpu22PHhENmPcRdFiHRjhAuHcs05RI=" crossorigin="anonymous"></script>
<script src="https://js.stripe.com/v3/"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/rangeslider.js/2.3.3/rangeslider.min.js"></script>
{% endblock %} {% block content %}


<main id="content">
    <div class="novaContent container-full" id="novaContent">
        <div class="text-center padding-bottom-50">
            <div class="container padding-bottom-25">
                {% block download %} {% endblock %}
                <div class="row">
                    <div class="col-xs-22 col-xs-offset-1 col-sm-22 col-sm-offset-1 col-md-22 col-md-offset-1 col-lg-20 col-lg-offset-2 donate-container">
                        <div class="donate-container-content">
                            <h1>
                                Accelerate <strong class="orange">KiCad</strong> today with your donation
                            </h1>
                            <p>
                                If KiCad is valuable to you, please consider donating to help us make it even better. Contributions from users like you provide the backbone of support for continued KiCad development. All money donated is used to support the growth of KiCad and the KiCad
                                Community.
                            </p>
                            <input class="donate-bar" type="range" value="3" step="1" min="1" max="5">
                        </div>


                        <ul class="list-inline list-donate-amount text-left margin-bottom-20">
                            <li class="one">$10</li>
                            <li class="two">$25</li>
                            <li class="three text-center">$40</li>
                            <li class="four text-right">$65</li>
                            <li class="five text-right">$100</li>
                        </ul>
                        <div class="form-inline margin-bottom-20 donate-submit">
                            <div class="input-group">
                                <input id="donate-val" class="donate-amount form-control text-center" type="number" name="firstAmount" value="40" min="10">
                                <div class="dropdown input-group-addon">
                                    <button class="dropbtn" id="currency">USD</button>
                                    <div class="dropdown-content">
                                        <a id="currency_usd" href="#">USD</a>
                                        <a id="currency_eur" href="#">EUR</a>
                                        <a id="currency_cny" href="#">CNY</a>
                                    </div>
                                </div>
                            </div>
                            <button id="checkout-button" type="button" class="btn btn-info btn-donate">Donate</button>
                        </div>
                    </div>

                    <div class="col-xs-22 col-xs-offset-1 col-sm-22 col-sm-offset-1 col-md-22 col-md-offset-1 col-lg-20 col-lg-offset-2">
                        Donations are accepted via credit card (&euro;, CN&yen;, US&dollar;), AliPay (CN&yen;, US&dollar;), Sofort(&euro;), iDEAL(&euro;) and SEPA Direct Debit(&euro;).
                    </div>
                </div>
            </div>
            <p style="text-align: center;"><a href=mailto:support@kipro-pcb.com?Donation Problems>Problems Donating?</a> | <a href="https://www.kicad.org/donate/faq">Donation FAQ</a></p>
        </div>
    </div>
</main>
<script type="text/javascript">
    var stripe = Stripe('pk_live_sj05FFLZO3pML3O9I5sapRlw00CvWUqCCg');
    var checkoutButton = document.getElementById('checkout-button');
    var output = document.getElementById('donate-val');

    var usd = document.getElementById('currency_usd');
    var eur = document.getElementById('currency_eur');
    var cny = document.getElementById('currency_cny');

    var val_vector = {
        'usd': [10, 25, 40, 65, 100],
        'eur': [10, 20, 35, 50, 100],
        'cny': [30, 50, 100, 300, 600]
    };

    function updateVals() {
        var currency_sym = '$'
        var currency = document.querySelector('#currency').textContent.toLowerCase();

        if (currency == 'eur') {
            currency_sym = '€'
        } else if (currency == 'cny') {
            currency_sym = '¥'
        }

        document.querySelector('.one').textContent = currency_sym + val_vector[currency][0]
        document.querySelector('.two').textContent = currency_sym + val_vector[currency][1]
        document.querySelector('.three').textContent = currency_sym + val_vector[currency][2]
        document.querySelector('.four').textContent = currency_sym + val_vector[currency][3]
        document.querySelector('.five').textContent = currency_sym + val_vector[currency][4]
    }

    usd.onclick = function() {
        document.querySelector('#currency').textContent = 'USD';
        updateVals();
        output.value = val_vector[currency][document.querySelector('.donate-bar').value - 1]
        return false;
    }

    eur.onclick = function() {
        document.querySelector('#currency').textContent = 'EUR';
        updateVals();
        output.value = val_vector[currency][document.querySelector('.donate-bar').value - 1]
        return false;
    }

    cny.onclick = function() {
        document.querySelector('#currency').textContent = 'CNY';
        updateVals();
        output.value = val_vector[currency][document.querySelector('.donate-bar').value - 1]
        return false;
    }

    checkoutButton.addEventListener('click', function() {
        fetch('/create-checkout-session', {
                method: 'POST',
                headers: {
                    'Content-Type': 'application/json'
                },
                body: JSON.stringify({
                    amount: parseInt(output.value),
                    currency: document.querySelector('#currency').textContent
                })
            })
            .then(function(response) {
                return response.json();
            })
            .then(function(session) {
                return stripe.redirectToCheckout({
                    sessionId: session.id
                });
            })
            .then(function(result) {
                if (result.error) {
                    alert(result.error.message);
                }
            })
            .catch(function(error) {
                console.error('Error:', error);
            });
    });

    (function(jQuery, window, document) {

        var output = document.querySelectorAll('.donate-amount')[0];
        var currency = document.querySelector('#currency').textContent.toLowerCase();

        $(document).on('input', 'input[type="range"]', function(e) {
            output.value = val_vector[currency][e.currentTarget.value - 1]
        });

        $('input.donate-amount').focusout(function() {
            if ($(this).val() < val_vector[currency][0]) {
                $(this).val(val_vector[currency][0]);
            }
            $('input.form-amount').val($(this).val());
        });

        $('input[type="range"]').rangeslider({
            polyfill: false,
            onInit: function() {
                this.value = 3;
                output.value = val_vector[currency][2];
            }
        });

    })(jQuery, window, document);
</script>
{% endblock %}